<script setup lang="ts">
import { ref } from 'vue'
import CollapsiblePanel from './common/CollapsiblePanel.vue'
import ToggleButton from './common/ToggleButton.vue'
import InputField from './common/InputField.vue'
import CopyToClipboard from './common/CopyToClipboard.vue'

// 导入公共样式


// 定义props
const props = defineProps<{
  landType: string
}>()

// 表单数据状态定义
const singleLocationForm = ref({
  涉及占用林地: false,
  占用林地面积: '',
  林地手续文号: '',
  采矿许可年月: '',
  核发部门: '',
  矿种: '',
  采矿许可证证号: '',
  涉及保护地: false,
  保护地名称: '',
  保护地面积: '',
  保护地主管部门: '',
  保护地同意文号: ''
})

const batchLandForm = ref({
  涉及林地: false,
  林地面积: '',
  林地审核状态: '已获批',
  林草部门: '',
  涉及保护地: false,
  保护地名称: '',
  保护地面积: '',
  保护地主管部门: '',
  保护地同意文号: ''
})

// 存储复制的文本用于显示
// copiedText is removed as it's not being used

// 处理输入函数已移除，直接使用v-model绑定

// 生成要复制的文本
const generateCopyText = (): string => {
  let paragraph: string = ''
  
  if (props.landType === 'single') {
    // 构建单独选址的自然段落
    paragraph = `〔有关审核许可手续〕`
    
    if (singleLocationForm.value.涉及占用林地) {
      paragraph += `项目涉及占用林地${singleLocationForm.value.占用林地面积}公顷，`
      paragraph += `已取得林地手续文号为${singleLocationForm.value.林地手续文号}的林地审批文件。`
    } else {
      paragraph += `项目不涉及占用林地。`
    }
    
    if (singleLocationForm.value.采矿许可年月) {
      paragraph += `项目涉及采矿许可，核发部门为${singleLocationForm.value.核发部门}，`
      paragraph += `矿种为${singleLocationForm.value.矿种}，`
      paragraph += `采矿许可证证号为${singleLocationForm.value.采矿许可证证号}，`
      paragraph += `核发年月为${singleLocationForm.value.采矿许可年月}。`
    }
    
    if (singleLocationForm.value.涉及保护地) {
      paragraph += `项目涉及保护地${singleLocationForm.value.保护地名称}，`
      paragraph += `面积为${singleLocationForm.value.保护地面积}公顷，`
      paragraph += `保护地主管部门为${singleLocationForm.value.保护地主管部门}，`
      paragraph += `已取得同意文号为${singleLocationForm.value.保护地同意文号}的批准文件。`
    } else {
      paragraph += `项目不涉及各类保护地。`
    }
  } else {
    // 构建批次用地的自然段落
    paragraph = `〔林地审核情况〕`
    
    if (batchLandForm.value.涉及林地) {
      paragraph += `该批次用地涉及林地${batchLandForm.value.林地面积}公顷，`
      if (batchLandForm.value.林地审核状态 === '已获批') {
        paragraph += `已取得${batchLandForm.value.林草部门}《林地审核同意书》。`
      } else {
        paragraph += `相关材料已报${batchLandForm.value.林草部门}待批，我局承诺在用地上报省政府前补充《林地审核同意书》。`
      }
    } else {
      paragraph += `该批次不涉及占用林草部门管理范围内林地。`
    }
    
    if (batchLandForm.value.涉及保护地) {
      paragraph += `该批次用地涉及保护地${batchLandForm.value.保护地名称}，`
      paragraph += `面积为${batchLandForm.value.保护地面积}公顷，`
      paragraph += `保护地主管部门为${batchLandForm.value.保护地主管部门}，`
      paragraph += `已取得同意文号为${batchLandForm.value.保护地同意文号}的批准文件。`
    } else {
      paragraph += `该批次不涉及各类保护地。`
    }
  } 
  return paragraph
}
</script>

<template>
  <div>
    <h1 class="text-3xl font-bold text-blue-700 text-center mb-6">审核许可单元</h1>
    
    <!-- 文件原文（可折叠） -->
    <CollapsiblePanel title="文件原文">
      <div class="mb-4">
        <h3 class="font-semibold text-gray-700 mb-2">一、业务指导处室</h3>
        <p class="text-gray-600">国土空间用途管制处</p>
      </div>
      
      <div>
        <h3 class="font-semibold text-gray-700 mb-2">二、审查标准</h3>
        <ol class="list-decimal pl-5 text-gray-600 space-y-2">
          <li>涉及占用林地的，应当取得使用林地审核同意书，且应当在有效期内。涉及占用各类保护地的，需取得相关主管部门同意的意见。</li>
          <li>采矿用地需取得采矿许可证。</li>
        </ol>
      </div>
    </CollapsiblePanel>
    
    <!-- 审查内容模板（常驻显示） -->
    <div class="border border-gray-200 rounded-lg shadow mb-6 bg-white text-left">
      <div class="bg-gray-50 p-4 border-b">
        <h2 class="text-xl font-semibold text-gray-800">三、审查内容模板</h2>
      </div>
      
      <div class="p-4">

        <!-- 单独选址模板 -->
        <div v-if="props.landType === 'single'">
          <h3 class="text-lg font-semibold text-gray-800 mb-3">(一)单独选址</h3>
          <div class="text-gray-700 space-y-3">
            <p>〔有关审核许可手续〕</p>
            
            <!-- 涉及占用林地判断选择区块 -->
            <div class="section-block blue">
              <div class="flex items-center">
                <ToggleButton v-model="singleLocationForm.涉及占用林地" />
                <label class="section-label red ml-2">是否涉及占用林地：</label>
              </div>
            
              <!-- 根据是否涉及占用林地显示不同内容 -->
              <p v-if="singleLocationForm.涉及占用林地" >
                项目涉及占用林草部门管理范围内林地
                <InputField v-model="singleLocationForm.占用林地面积" type="number" step="0.01" min="0" placeholder="面积" />
                公顷，已按要求办理林地相关手续（文号：
                <InputField v-model="singleLocationForm.林地手续文号" placeholder="文号" width="w-36" />
                ）。
              </p>
              <p v-else >
                项目不涉及占用林草部门管理范围内林地。
              </p>
            </div>
            
            <!-- 采矿许可证信息区块 -->
            <div class="section-block green">
              <label class="section-label green">采矿许可证信息：</label>
              <p class="text-green-700">
                建设单位已于
                <InputField v-model="singleLocationForm.采矿许可年月" placeholder="2025年1月" width="w-36" />
                取得
                <InputField v-model="singleLocationForm.核发部门" placeholder="自然资源厅" width="w-36" />
                核发的
                <InputField v-model="singleLocationForm.矿种" placeholder="矿种" />
                采矿许可证（证号：
                <InputField v-model="singleLocationForm.采矿许可证证号" placeholder="C1000002025010100123456" width="w-48" />
                ）。
              </p>
            </div>
            
            <!-- 涉及保护地判断选择区块 -->
            <div class="section-block purple">
              <div class="flex items-center">
                <ToggleButton v-model="singleLocationForm.涉及保护地" />
                <label class="section-label purple ml-2">是否涉及保护地：</label>
              </div>
            
              <!-- 根据是否涉及保护地显示不同内容 -->
              <p v-if="singleLocationForm.涉及保护地" class="text-purple-700">
                项目用地涉及
                <InputField v-model="singleLocationForm.保护地名称" placeholder="保护地名称" width="w-36" />
                ，面积
                <InputField v-model="singleLocationForm.保护地面积" type="number" step="0.01" min="0" placeholder="面积" />
                公顷，已取得
                <InputField v-model="singleLocationForm.保护地主管部门" placeholder="保护地主管部门" width="w-36" />
                同意的意见（文号：
                <InputField v-model="singleLocationForm.保护地同意文号" placeholder="林草护字〔2025〕1号" width="w-36" />
                ）。
              </p>
              <p v-else class="text-purple-700">
                项目用地不涉及各类保护地。
              </p>
            </div>
          </div>
        </div>
        
        <!-- 批次用地模板 -->
        <div v-else>
          <h3 class="text-lg font-semibold text-gray-800 mb-3">(二)批次用地</h3>
          <div class="space-y-4">
            <p>〔林地审核情况〕</p>
            <!-- 林地审核情况区块 -->
              <div class="section-block blue">
                <div class="flex items-center">
                  <ToggleButton v-model="batchLandForm.涉及林地" />
                  <label class="section-label red ml-2">是否涉及林地：</label>
                </div>
              
              <!-- 林地审核情况 -->
              <div >
                <div v-if="batchLandForm.涉及林地">
                  <div class="mb-2">
                    该批次用地涉及林地
                    <InputField v-model="batchLandForm.林地面积" type="number" step="0.01" min="0" placeholder="面积" />
                    公顷，
                  </div>
                  <div class="mt-3">
                    <div class="flex items-center">
                        <ToggleButton 
                          v-model="batchLandForm.林地审核状态" 
                          :options="[
                            { label: '已获批', value: '已获批' },
                            { label: '正在办理', value: '正在办理' }
                          ]" 
                        />
                        <label class="section-label red ml-2">《林地审核同意书》：</label>
                      </div>
                    <div v-if="batchLandForm.林地审核状态 === '已获批'">
                      已取得
                      <InputField v-model="batchLandForm.林草部门" placeholder="A省林草局" width="w-36" />
                      《林地审核同意书》。
                    </div>
                    <div v-else-if="batchLandForm.林地审核状态 === '正在办理'">
                      相关材料已报
                      <InputField v-model="batchLandForm.林草部门" placeholder="A省林草局" width="w-36" />
                      待批，我局承诺在用地上报省政府前补充《林地审核同意书》。
                    </div>
                  </div>
                </div>
                <div v-else>
                  该批次不涉及占用林草部门管理范围内林地。
                </div>
              </div>
            </div>
            
            <!-- 保护地情况区块 -->
              <div class="section-block purple">
                <div class="flex items-center">
                  <ToggleButton v-model="batchLandForm.涉及保护地" />
                  <label class="section-label purple ml-2">是否涉及保护地：</label>
                </div>
              
              <!-- 根据是否涉及保护地显示不同内容 -->
              <p v-if="batchLandForm.涉及保护地" class="text-purple-700">
                项目用地涉及
                <InputField v-model="batchLandForm.保护地名称" placeholder="保护地名称" width="w-36" />
                ，面积
                <InputField v-model="batchLandForm.保护地面积" type="number" step="0.01" min="0" placeholder="面积" />
                公顷，已取得
                <InputField v-model="batchLandForm.保护地主管部门" placeholder="保护地主管部门" width="w-36" />
                同意的意见（文号：
                <InputField v-model="batchLandForm.保护地同意文号" placeholder="林草护字〔2025〕1号" width="w-36" />
                ）。
              </p>
              <p v-else class="text-purple-700">
                项目用地不涉及各类保护地。
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 复制按钮和显示复制的文本内容 -->
    <CopyToClipboard :text="generateCopyText()" />
  </div>
</template>

<style scoped>
/* 组件特定样式保留 */
</style>